.container {
  --gap-size: 4px;
  margin-top: 21px;
}

.list {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: calc(2 * var(--gap-size));
  --border: 1px solid var(--grey);
}

.item {
  width: 100%;
  display: grid;
  grid-template-columns: 15px 1fr auto 1fr 15px;
  grid-template-areas: "drag key colon value delete";
  gap: var(--gap-size);
  align-items: center;
  padding: var(--gap-size);
}

.item:global(.sortable-chosen) {
  outline: 2px solid var(--rstudio-blue);
}

.keyField {
  grid-area: key;
  min-width: 0;
}

.valueField {
  grid-area: value;
  min-width: 0;
}

.header {
  margin-top: -5px;
  margin-bottom: -5px;
  text-align: center;
}

.dragHandle {
  grid-area: drag;
  cursor: ns-resize;
  transform: translateY(2px);
}

.item svg {
  width: 16px;
}

.deleteButton {
  /* This padding and then inverse offset is used to increase the hitsize for
  the button */
  grid-area: delete;
  --offset: 4px;
  background-color: transparent;
  transform: translate(-2px, -2px);
  outline: none;
}

.addItemButton {
  color: var(--icon-color);
  font-size: 14px;
  padding: 4px;
  transform: translateY(-2px);
}

.separator {
  transform: translateY(-1px);
}

.deleteButton:hover > svg {
  stroke-width: 3;
}
